<template>
	<view class="box">
		<view class="tab-nav ">
			<view class=" tab-list-item" v-for="(item,index) in toggleList" :key="index"
				@click="clickToggleHandle(item,index)">
				<view :class="{ active: indexs==index}" class="text">{{ item.label }}</view>
				<view class="line" v-if="indexs==index">

				</view>
				<!-- 	<view class="center"  v-if="indexs==0">
					<image :src="baseUrl +'/static/icon/card1.png'" mode="aspectFill"></image>
					<text>{{info.money}}</text>
				</view>
				<view class="center" v-if="indexs==1">
					<image :src="baseUrl +'/static/icon/card1.png'" mode="aspectFill"></image>
					<text>{{info.service_voucher}}</text>
				</view>
				<view class="center" v-if="indexs==2">
					<image :src="baseUrl +'/static/icon/card1.png'" mode="aspectFill"></image>
					<text>{{amount}}</text>
				</view> -->
			</view>
		</view>
		<view class="wrap" v-if="indexs==0">
			<view class="top">
				<text>可用More券余额</text>

			</view>
			<view class="center">
				<image :src="baseUrl +'/static/icon/card1.png'" mode="aspectFill"></image>
				<text>{{info.money}}</text>
			</view>

		</view>
		<view class="wrap" v-if="indexs==1">
			<view class="top">
				<text>累计获得More券</text>

			</view>
			<view class="center">
				<image :src="baseUrl +'/static/icon/card1.png'" mode="aspectFill"></image>
				<text>{{amount}}</text>
			</view>

		</view>
		<view class="wrap" v-if="indexs==2">
			<view class="top">
				<text>可用增值服券余额</text>

			</view>
			<view class="center">
				<image
					src="https://images.fudiemall.com/storage/default/20250508/dq802c09cef1740f3b7908a41849214a730d323980.png"
					mode="aspectFill"></image>
				<text>{{info.service_voucher}}</text>
			</view>

		</view>
				<view class="wrap"  v-if="indexs==0">
			<view class="top" style="display: flex;justify-content: flex-start;align-items: center;">
				<text>待解冻More券</text>
				<image  @click="flagrule=true" :src="baseUrl + '/static/icon/wenhao.png'" mode=""></image>
			</view>
			<view class="center " style="display: flex;justify-content: flex-start;margin-left: 30rpx;">
			
				<text class="c3" style="color: #333;" >{{info.freeze_money}}</text>
			</view>
			<view class="btnc" @click="gettrialThaw()">
				解冻
			</view>
		</view>
		<view class="main" v-if="indexs!=1">
			<view class="tit">
				变动时间
			</view>
			<view class="timewrap">
				<view class="timeitem">
					<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
						<view class="" :class="date?'c3':'uni-input'">{{date||"请选择"}}</view>
					</picker>

				</view>
				<text>至</text>
				<view class="timeitem">
					<picker mode="date" class="ss" :value="date2" :start="startDate2" :end="endDate2"
						@change="bindDateChange2">
						<view class="" :class="date2?'c3':'uni-input'">{{date2||"请选择"}}</view>
					</picker>
				</view>
			</view>
			<view class="tit">
				变动明细
			</view>
			<view class="wraps" v-for="item in lists" :key="item.id" @click="gonext(item)">
				<view class="wrapsleft">
					<view class="name">
						{{item.memo}}
					</view>

					<view class="time">
						{{item.create_time}}
					</view>
				</view>
				<view class="wrapsright">
					<text class="c3"> {{item.money}}</text>
					<image v-if="item.from==9||item.from==19" :src="baseUrl + '/static/icon/right.png'"
						mode="aspectFill"></image>
				</view>
			</view>
			<noDatas :xxxList="lists" :status="status"></noDatas>
		</view>
		<u-popup :show="flagrule" mode="center" @close="flagrule=false" :closeable="true" bgColor="transparent"
			:closeOnClickOverlay="false">
			<view class="popup-content">
				<text class="popup-title h2">提示</text>
				<view class="popup-center">
					{{rule}}
				</view>

				<text class="btns" @click="flagrule=false">确定</text>
			</view>
		</u-popup>
		<u-popup :show="jdflag" mode="center" @close="jdflag = false" closeable bgColor="transparent">
			<view class="prompt flex_ZC">
				<text class="f36">解冻More券</text>
				<text class="prompt_tit">{{notice}}</text>
				<view class="prompt_ntm flex_ld_a">
					<text @click="jdflag = false">我再想想</text>
					<text @click="getthawMore">立即解冻</text>
				</view>
			</view>
		</u-popup>
	</view>

</template>

<script>
	import {
		Morelist,
		serviceVoucherLoglist,
		trialThaw,
		thawMore,
		setting
	} from "../../api/other.js"
	import {
		myuser,
		userSummary
	} from "../../api/user.js"
	export default {
		data() {
			const currentDate = this.getDate({
				format: true
			});
			const currentDate2 = this.getDate2({
				format: true
			})
			return {
				baseUrl: this.$imageBaseUrl,
				date: "",
				date2: "",
				info: {

				},
				page: 1,
				size: 50,
				status: "loadmore",
				lists: [],
				toggleList: [{
						label: 'More劵',
						statusval: "",
						select: true
					},
					{
						label: '累计获得More券',
						statusval: "1",
						select: false
					},
					{
						label: '增值服务劵',
						statusval: "1",
						select: false
					}


				],
				indexs: 0,
				amount: "",
				flagrule: false,
				rule: "",
				notice: "",
				jdflag: false,
				djdmoney: ""
			}
		},
		onLoad() {
			this.getlist()
			this.getuser()
			this.getSummary()
			this.getrule()
		},
		// v-if="info.is_voucher==1"
		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			},
			startDate2() {
				return this.getDate2('start');
			},
			endDate2() {
				return this.getDate2('end');
			}
		},
		methods: {
			getthawMore() {
				// if(this.djdmoney=="0.0000"){
				// 	uni.$u.toast("")
				// 	return false
				// }
				thawMore().then(res => {
					if (res.code == 1) {
						this.jdflag = false
						this.getuser()
					}
					uni.$u.toast(res.msg)
				})
			},
			getrule() {
				setting().then(res => {
					this.rule = res.data.agreement.freeze_money
				})
			},
			gettrialThaw() {

				trialThaw().then(res => {
					this.djdmoney = res.data.money
					this.jdflag = true
					this.notice = res.data.notice
				})
			},
			clickToggleHandle(ele, index) {
				this.indexs = index
				this.toggleList.forEach(item => item.select = false)
				// this.currLabel = ele.label
				ele.select = true
				this.page = 1
				this.date = ""
				this.date2 = ""
				if (index == 0) {
					this.getlist()
				} else {
					this.getlist2()
				}

			},
			getSummary() {
				userSummary().then(res => {
					console.log(res);
					this.amount = res.data.amount
				})
			},
			getlist() {
				Morelist({
					page: this.page,
					page_size: this.size,
					start_time: this.date,
					end_time: this.date2,
					type: 1
				}).then(res => {
					if (res.code == 1) {
						let list = res.data.data;

						this.lists = this.page == 1 ? list : this.lists.concat(list);
						console.log(this.lists);
						if (list.length < this.size) this.status = 'nomore';
						else this.status = 'loading';
					}
					console.log(res)
				})
			},
			getlist2() {
				serviceVoucherLoglist({
					page: this.page,
					page_size: this.size,
					start_time: this.date,
					end_time: this.date2
				}).then(res => {
					if (res.code == 1) {
						let list = res.data.data;
						this.lists = this.page == 1 ? list : this.lists.concat(list);
						console.log(this.lists);
						if (list.length < this.size) this.status = 'nomore';
						else this.status = 'loading';
					}
					console.log(res)
				})
			},
			getuser() {
				myuser().then(res => {
					this.info = res.data
					if (res.data.is_voucher == 0) {
						this.toggleList.splice(-1)
					}
				})
			},
			gonext(item) {
				if (item.from == 9) {
					uni.navigateTo({
						url: "/pageUser/myuser/changedetail?id=" + item.data_id
					})
				} else if (item.from == 19) {
					uni.navigateTo({
						url: "/pageUser/myuser/dmchangedetail?id=" + item.data_id
					})
				}

			},
			bindDateChange: function(e) {
				this.date = e.detail.value
				if (this.date && this.date2) {
					this.page = 1
					this.getlist()
				} else {
					if (!this.date) {
						uni.$u.toast("请选择初始时间")
					}
					if (!this.date2) {
						uni.$u.toast("请选择结束时间")
					}
				}
			},
			bindDateChange2: function(e) {
				this.date2 = e.detail.value
				if (this.date && this.date2) {
					this.page = 1
					this.getlist()
				} else {
					if (!this.date) {
						uni.$u.toast("请选择初始时间")
					}
					if (!this.date2) {
						uni.$u.toast("请选择结束时间")
					}
				}
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {}
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
			getDate2(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {}
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			}
		},
		onReachBottom() {
			if (this.status != 'nomore') {
				this.page = this.page + 1
				this.getlist()
			}
		},
	}
</script>

<style lang="scss" scoped>
	.box {
		width: 750rpx;
		// height: 100vh;
		background: #F7F7F7;
	}

	.tab-nav {
		width: 750rpx;
		height: 80rpx;
		// background-color: #fff;
		// margin-left: 20rpx;
		display: flex;
		align-items: center;
		// position: fixed;
		padding: 0 34rpx;
		z-index: 999;
		// justify-content: space-around;

		.tab-list-item {
			position: relative;

			.text {
				display: flex;
				justify-content: center;
				align-items: center;
				padding: 10rpx;
				opacity: 1;
				font-weight: 500;
				text-align: center;
				font-size: 32rpx;
				color: #A6A5AF;
				z-index: 99;
				position: relative;
			}

			.active {
				font-weight: 700;
				color: #333333;
				z-index: 98;
				position: relative;
			}

			.line {
				width: 66rpx;
				height: 10rpx;
				background: linear-gradient(90deg, #FA2222 2%, #FFC400 98%);
				border-radius: 118rpx 118rpx 118rpx 118rpx;
				position: absolute;
				top: 70%;
				left: 50%;
				transform: translate(-50%);
				z-index: 60;
			}
		}
	}

	.wrap {
		width: 690rpx;
		height: 188rpx;
		background: #FFFFFF;
		border-radius: 24rpx 24rpx 24rpx 24rpx;
		margin: 0 auto;
		margin-top: 30rpx;
		position: relative;

		.top {
			display: flex;
			justify-content: space-between;
			padding-top: 30rpx;
			margin-left: 30rpx;

			>text {
				font-weight: 400;
				font-size: 32rpx;
				color: #3D3D3D;
			}

			>image {

				width: 28rpx;
				height: 28rpx;
				margin-left: 16rpx;

			}

			.right {
				display: flex;
				align-items: center;

				>text {
					font-weight: 400;
					font-size: 26rpx;
					color: #999999;
				}

				>image {
					width: 8rpx;
					height: 16rpx;
					margin-left: 16rpx;
					margin-right: 16rpx;
				}
			}
		}

		.center {
			display: flex;
			align-items: center;
			justify-content: center;
			margin-top: 34rpx;

			>text {
				font-weight: 500;
				font-size: 48rpx;
				color: #FFC300;
			}

			>image {
				width: 40rpx;
				height: 40rpx;
				margin-right: 10rpx;
			}


		}

		.bot {
			width: 640rpx;
			height: 70rpx;
			background: #F7F7F7;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			margin: 0 auto;
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 30rpx;

			.left {
				display: flex;
				align-items: center;
				font-weight: 400;
				font-size: 28rpx;
				color: #3D3D3D;
				padding-left: 20rpx;

				>image {
					width: 28rpx;
					height: 28rpx;
					margin-left: 16rpx;
				}
			}

			.rights {
				display: flex;
				align-items: center;
				margin-right: 20rpx;

				>image {
					width: 28rpx;
					height: 28rpx;
					margin-right: 10rpx;
				}
			}
		}
	}

	.main {
		width: 690rpx;
		min-height: 1042rpx;
		background: #FFFFFF;
		border-radius: 24rpx 24rpx 24rpx 24rpx;
		margin: 0 auto;
		margin-top: 30rpx;

		.tit {
			padding-top: 30rpx;
			margin-left: 30rpx;
		}

		.timewrap {
			display: flex;
			align-items: center;
			justify-content: space-around;
			margin-top: 30rpx;

			.timeitem {
				width: 268rpx;
				height: 70rpx;
				background: #F7F7F7;
				border-radius: 20rpx 20rpx 20rpx 20rpx;
				text-align: center;
				line-height: 70rpx;
			}
		}

		.wraps {
			width: 630rpx;
			height: 158rpx;
			border-bottom: 2rpx solid rgba(0, 0, 0, 0.05);
			margin: 0 auto;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.wrapsleft {
				width: 450rpx;
				display: flex;
				flex-direction: column;

				.time {
					margin-top: 20rpx;
					font-weight: 400;
					font-size: 28rpx;
					color: #999999;
				}

				.name {
					width: 450rpx;
					display: -webkit-box;
					/* 设置子元素排列方向为垂直 */
					-webkit-box-orient: vertical;
					/* 限制文本显示的行数 */
					-webkit-line-clamp: 2;
					/* 隐藏溢出的内容 */
					overflow: hidden;
					margin-top: 20rpx;
					font-weight: 400;
					font-size: 28rpx;
					color: #333;

				}

			}

			.wrapsright {
				display: flex;
				align-items: center;

				>image {
					width: 8rpx;
					height: 16rpx;
					margin-left: 16rpx;
				}
			}
		}
	}

	.uni-input {
		color: #999;
	}

	.btnc {
		width: 128rpx;
		height: 56rpx;
		background: #FFC300;
		border-radius: 422rpx 422rpx 422rpx 422rpx;
		text-align: center;
		font-weight: 400;
		font-size: 26rpx;
		color: #333333;
		line-height: 56rpx;
		position: absolute;
		bottom: 40rpx;
		right: 20rpx;
	}

	.popup-content {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 48rpx;
		width: 602rpx;
		max-height: 800rpx;
		overflow: auto;
		background: #FFFFFF;
		border-radius: 22rpx 22rpx 22rpx 22rpx;
		padding-bottom: 30rpx;

	}

	.popup-title {
		margin-top: 40rpx;
		font-weight: 700;
		font-size: 32rpx;
		color: #333333;
	}

	.popup-center {
		width: 500rpx;
		// align-items: center;
		text-align: left;
		overflow: auto;
		line-height: 55rpx;

		>image {
			margin-left: 14rpx;
			width: 20rpx;
			height: 20rpx;
		}
	}

	.btns {
		width: 264rpx;
		height: 72rpx;
		background: linear-gradient(90deg, #FA2222 2%, #FFC400 98%);
		border-radius: 280rpx 280rpx 280rpx 280rpx;
		text-align: center;
		line-height: 72rpx;
		font-weight: 400;
		font-size: 28rpx;
		color: #FFFFFF;
		margin-top: 30rpx;
	}

	// .uni-picker-container .uni-picker-action.uni-picker-action-confirm {
	//     float: right;
	// }
	.prompt {
		width: 600rpx;
		background: #ffffff;
		margin: 0 auto;
		border-radius: 20rpx;
		padding-top: 10rpx;
		padding-bottom: 40rpx;
	}

	.prompt>text {
		margin-top: 40rpx;
	}

	.prompt_tit {
		margin: 0 30rpx;
		font-size: 28rpx;
		color: #666666;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
	}

	.prompt_ntm {
		width: 100%;
		font-size: 30rpx;
		margin-top: 50rpx;
	}

	.prompt_ntm>text:nth-child(1) {
		width: 200rpx;
		height: 72rpx;
		line-height: 72rpx;
		text-align: center;
		background: #F2F2F2;
		border-radius: 40rpx;
		color: #333333;
	}

	.prompt_ntm>text:nth-child(2) {
		width: 200rpx;
		height: 72rpx;
		line-height: 72rpx;
		text-align: center;
		background: linear-gradient(90deg, #FA2222 2%, #FFC400 98%);
		border-radius: 40rpx;
		color: #ffffff;
	}
</style>